<template>
    <PortalToFollowElem
      v-model:open="open"
      placement='left-start'
    >
      <template #trigger class='w-full'>
        <div
          :class="cn(
            isObj ? ' pr-1' : 'pr-[18px]',
            isHovering && (isObj ? 'bg-primary-50' : 'bg-state-base-hover'),
            'relative flex h-6 w-full cursor-pointer items-center  rounded-md pl-3')"
          @click="handleChosen"
          onMouseDown="e => e.preventDefault()"
            @mouseover="isItemHovering = true"
            @mouseout ="isItemHovering = false"
        >
          <div class='flex w-0 grow items-center'>
              <div v-if="!isEnv && !isChatVar" :title="itemData.variable" class='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{{itemData.variable}}</div>
              <div v-if="isEnv" :title="itemData.variable" class='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{{itemData.variable.replace('env.', '')}}</div>
              <div v-if="isChatVar" title={itemData.des} class='system-sm-medium ml-1 w-0 grow truncate text-text-secondary'>{{itemData.variable.replace('conversation.', '')}}</div>
          </div>
          <div class='ml-1 shrink-0 text-xs font-normal capitalize text-text-tertiary'>{itemData.type}</div>
          <ChevronRight v-if="isObj" :class="cn('ml-0.5 h-3 w-3 text-text-quaternary', isHovering && 'text-text-tertiary')" />
        </div>
      </template>
      <div :style="{
        zIndex: 100,
      }">
          <VarReferenceVarsObjectChildren v-if="isObj && !isFile"
            :nodeId="nodeId"
            :title="title"
            :objPath="[...objPath, itemData.variable]"
            :data="itemData.children"
            @change="onChange"
            @mouseover="isChildrenHovering = true"
            @mouseout ="isChildrenHovering = false"
            :itemWidth="itemWidth"
            :isSupportFileVar="isSupportFileVar"
          />
          <VarReferenceVarsObjectChildren v-if="isFile"
            :nodeId="nodeId"
            :title="title"
            :objPath="[...objPath, itemData.variable]"
            :data="FILE_STRUCT"
            @change="onChange"
            @hovering="(v)=>isChildrenHovering = v"
            :itemWidth="itemWidth"
            :isSupportFileVar="isSupportFileVar"
          />
      </div>
    </PortalToFollowElem>
</template>
<script setup lang="ts" name="VarReferenceVarsItem">
import {computed, ref, watch} from 'vue';
import PortalToFollowElem  from '@/components/portal-to-follow-elem/index.vue';
import cn from '@/utils/classnames'
import { type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
import { FILE_STRUCT } from '@/app/components/workflow/constants'
import VarReferenceVarsObjectChildren from './var-reference-vars-object-children.vue';
type ItemProps = {
  nodeId: string
  title: string
  objPath: string[]
  itemData: Var
  onChange: (value: ValueSelector, item: Var) => void
  onHovering?: (value: boolean) => void
  itemWidth?: number
  isSupportFileVar?: boolean
  isException?: boolean
  isLoopVar?: boolean
}

const props = defineProps<ItemProps>();

const isChildrenHovering = ref(false);
const isItemHovering = ref(false);
const open = ref(false);
const isFile = computed(()=> props.itemData.type === VarType.file) 
const isObj = computed(()=> ([VarType.object, VarType.file].includes(props.itemData.type) && props.itemData.children && props.itemData.children.length > 0));
const isSys = computed(()=> props.itemData.variable.startsWith('sys.'))
const isEnv = computed(()=> props.itemData.variable.startsWith('env.'))
const isChatVar = computed(()=> props.itemData.variable.startsWith('conversation.'))
const isHovering = computed(()=> isItemHovering.value || isChildrenHovering.value)

watch(isHovering,() => {
    props.onHovering && props.onHovering(isHovering.value)
    open.value = isObj.value && isHovering.value;
});
const handleChosen = (e: MouseEvent) => {
e.stopPropagation()
if (!props.isSupportFileVar && isFile.value)
    return

if (isSys || isEnv || isChatVar) { // system variable | environment variable | conversation variable
    props.onChange([...props.objPath, ...props.itemData.variable.split('.')], props.itemData)
}
else {
    props.onChange([props.nodeId, ...props.objPath, props.itemData.variable], props.itemData)
}
}
</script>